<template>
    <div>
        <ul>
            <!-- 无key的情况就是就地复用 -->
            <!-- 将key设置为index,,更新时按照key进行对比,结果依然和就地反复用一样 -->
            <!-- key的要求:必须是字符串或数字,还得是唯一的 -->
            <!-- 将key设置为id,更新时按照key进行对比,结果变成更少的DOM操作 -->
            <!-- 结论:有id设置为id,无id设置为索引 -->
            <li v-for="item in arr" :key="item.id">
                {{item.name}}
                <input type="text">
            </li>
        </ul>
        <button @click="insert">插入</button>
    </div>
</template>

<script>
export default {
    name: 'Two2VForKey',

    data() {
        return {
            arr:[
                {id:50,name:"老大"},
                {id:31,name:"老二"},
                {id:10,name:"老三"},
            ],
        };
    },

    mounted() {
        
    },

    methods: {
        insert(){
            // 参数1:从哪里删除
            // 参数2:删除几个
            // 参数3:插入新元素
            this.arr.splice(1,0, {id:20,name:"新来的"})
        }
    },
};
</script>

<style lang="scss" scoped>

</style>